<template>
  <div>
    <div class="title">
      <strong>
        <span>定制题库问答系统</span>
      </strong>
    </div>
    <hr/>
    <el-menu
        background-color="#3c3f41"
        text-color="#fff"
        :router="true"
        :default-active="$route.path"
        :unique-opened="true">
      <NavigationItem
          v-for="(menuItem, index) in menuTree"
          :key="menuItem.path  + index"
          :item="menuItem"
      ></NavigationItem>
    </el-menu>
  </div>
</template>

<script>
import { get } from "@/plugins/axios"
import NavigationItem from '@/views/navigation/navigationItem'

export default {
  name: "navigation",
  created() {
    this.getNavigationMenuTree()
  },
  components: { NavigationItem },
  data() {
    return {
      uri: {
        menuTree: '/menu/navigationMenuTree'
      },
      menuTree: []
    }
  },
  methods: {
    getNavigationMenuTree() {
      const param = {
        roleId: this.$store.getters.GET_ROLE
      }
      get(this.uri.menuTree, param, response => {
        if (response.code === 200) {
          this.menuTree = response.data
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
@text-color: #fff;
@font-size: 18px;
.title {
  height: 61px;
  line-height: 61px;
  text-align: center;
  font-size: 22px;
  color: @text-color
}

/deep/
.el-submenu__title {
  font-size: @font-size
}

.el-menu-item {
  font-size: @font-size
}
</style>